<template>
    <div class="scrollPage" :style="scrollPageStyle">
        <transition mode="out-in" name="scrollPage">
            <div class="scroll toTop" :class="{ cannotClick: !canclick }" v-if="visibleToTopBottom" @click="backTop">
                <el-icon :size="18" color="#409EFF">
                    <ArrowUpBold />
                </el-icon>
            </div>
        </transition>
        <transition mode="out-in" name="scrollPage">
            <div class="scroll nextPage" :class="{ cannotClick: !canclick }" v-if="visibleBackToBottom" @click="nextPage">
                <el-icon :size="18" color="#409EFF">
                    <ArrowDownBold />
                </el-icon>
            </div>
        </transition>
        <transition mode="out-in" name="scrollPage">
            <div class="scroll toBottom" :class="{ cannotClick: !canclick }" v-if="visibleBackToBottom" @click="toBottom">
                <el-icon :size="18" color="#409EFF">
                    <CaretBottom />
                </el-icon>
            </div>
        </transition>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, nextTick, ref } from "vue"
import { ScrollPosition } from "@/util/scrollTo"
import { usePathStore } from "@/store/index"
import { position } from "@/router/index"
import { storeToRefs } from "pinia"
const pathStore = usePathStore()
const { pageHeight } = storeToRefs(pathStore)

const scrollPosition = new ScrollPosition()
const canclick = ref(true)

const props = defineProps({
    visibilityTopHeight: {
        type: Number,
        default: 200
    },
    visibilityBottomHeight: {
        type: Number,
        default: 200
    },
    duration: {
        type: Number,
        default: 800
    },
    bottom: {
        type: Number,
        default: 35
    },
    right: {
        type: Number,
        default: 40
    },
    gap: { //按钮之间的间隔
        type: Number,
        default: 30
    }
})

onMounted(() => {
    if (pageHeight.value == 0) {
        nextTick(() => {
            setTimeout(() => {
                pageHeight.value = document.getElementById("app")?.scrollHeight || 0
            }, 100)
        })
    }
})

// 显示向下滚顿按钮
const visibleBackToBottom = computed(() => {
    if (position.value + window.innerHeight + props.visibilityBottomHeight < pageHeight.value) {
        return true
    }
    return false
})
// 显示指定按钮
const visibleToTopBottom = computed(() => {
    if (position.value > props.visibilityTopHeight) {
        return true
    }
    return false
})


const moveTo = (targetPositon: number, callback?: Function) => {
    if( !canclick.value ) return;
    canclick.value = false
    scrollPosition.smoothScrollTo(targetPositon, props.duration, () => { 
        canclick.value = true;
        if(callback) callback();
    } )
}


const backTop = () => {
    moveTo(0)
}

const toBottom = () => {
    moveTo( pageHeight.value )
}
const nextPage = () => {
    moveTo( position.value + window.innerHeight)
}




const scrollPageStyle = computed(() => {
    return {
        "--scroll-position-bottom": `${props.bottom}px`,
        "--scroll-position-right": `${props.right}px`,
        "--scroll-btn-gap": `${props.gap}px`
    }
})



</script>
<style lang="scss">
.scrollPage {
    $--scroll-bottom: var(--scroll-bottom, 35px);
    $--scroll-btn-gap: var(--scroll-btn-gap, 30px);
    $--scroll-btn-size: var(--scroll-btn-size, 40px);
    $--scroll-position-right: var(--scroll-position-right, 40px);
    $--scroll-position-bottom: var(--scroll-position-bottom, 35px);

    .scroll {
        position: fixed;
        width: $--scroll-btn-size;
        height: $--scroll-btn-size;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, .12);
        z-index: 10;
        right: $--scroll-position-right;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;


        &.toBottom {
            // 30px
            bottom: $--scroll-position-bottom;
        }

        &.nextPage {
            // 105px
            bottom: calc($--scroll-position-bottom + $--scroll-btn-size + $--scroll-btn-gap);
        }

        &.toTop {
            bottom: calc($--scroll-position-bottom + $--scroll-btn-size * 2 + $--scroll-btn-gap * 2);
        }

        &.cannotClick {
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
            cursor: auto;
        }
    }

    &-enter-from,
    &-leave-to {
        opacity: 0;
    }

    &-enter-to,
    &-leave-from {
        opacity: 1;
    }

    &-enter-active,
    &-leave-active {
        transition: all .4s linear;
    }

}</style>